<template>
  <a-select
      v-model:value="value"
      mode="multiple"
      :disabled="disabled"
      :options="list"
      :field-names="{ label: 'roleName', value: 'id' }"
      :placeholder="placeholder"
      :allow-clear="true"
  />
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { Role } from '@/config/common'
import { getTotalRoles } from '@/api/sys-role'

const props = defineProps({
  roleIds: Array,
  placeholder: String,
  disabled: Boolean
})

const value = computed<any>({
  set: val => {
    console.log(val)
    emits('update:roleIds', val)
  },
  get: () => {
    return props.roleIds
  }
})

const list = ref<Role[]>([])

const loadData = () => {
  getTotalRoles().then(res => {
    list.value = res
  })
}

onMounted(() => {
  loadData()
})

const emits = defineEmits(['update:roleIds'])
</script>

<style scoped>

</style>
